import React from 'react';
import { makeAutoObservable } from 'mobx';
import { useObserver, Observer, observer, useLocalObservable } from './mobx-react';


export default function () {
  const store = useLocalObservable(() => (
    {
      number: 1,
      add() {
        this.number++;
      }
    }
  ));
  return useObserver(() => (
    <div>
      <p>{store.number}</p>
      <button onClick={store.add}>+</button>
    </div>
  ));
}

/* @observer
class Counter extends React.Component {
  render() {
    return (
      <div>
        <p>{store.number}</p>
        <button onClick={store.add}>+</button>
      </div>
    )
  }
}
export default Counter; */
//export default observer(Counter);
/* 
export default observer(function () {
  return (
    <div>
      <p>{store.number}</p>
      <button onClick={store.add}>+</button>
    </div>
  )
}) */